<template>
  <div class="login-box">
    <!-- 导航栏 -->
    <van-nav-bar title="登录"  class="nav-box">
      <template  v-slot:left >
        <i class="iconfont icon-zuojiantou" @click="Bank"></i>
      </template>
    </van-nav-bar>
    <!-- 导航栏 -->

    <!-- 登录表单 -->
    <van-form @submit="onSubmit" ref="myfrom">
      <!-- 手机号码输入框 -->
      <van-field
        v-model="userinfo.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="myformrules.mobile"
      >
        <!-- <i slot="left-icon" class="iconfont icon-shouji"></i> -->
        <!-- 用具名插槽，设置手机图标 -->
        <template v-slot:left-icon>
          <i class="iconfont icon-shouji"></i>
        </template>
      </van-field>
      <!-- 手机号码输入框 -->

      <!-- 验证码输入框 -->
      <van-field
        v-model="userinfo.code"
        type="text"
        name="code"
        placeholder="请输入验证码"
        :rules="myformrules.code"
      >
        <!-- 用具名插槽，设置验证码图标 -->
        <template v-slot:left-icon>
          <i class="iconfont icon-yanzhengma"></i>
        </template>
        <!-- 用具名插槽，设置发送验证码 按钮 -->
        <template #button>
          <van-count-down
            :time="1000 * 60"
            format="ss s"
            v-if="!isshow"
            v-on:finish="setIsShow"
          />
          <van-button
            v-if="isshow"
            round
            plain
            size="mini"
            type="info"
            @click="getCode"
            native-type="button"
            >获取验证码</van-button
          >
        </template>
      </van-field>
      <!-- 验证码输入框 -->

      <!-- 登录按钮 -->
      <div style="margin: 16px">
        <van-button class="submit-box" block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
      <!-- 登录按钮 -->
    </van-form>
    <!-- 登录表单 -->
  </div>
</template>

<script>
import { login, code } from "@/api/user.js";
export default {
  name: "LoginIndex",
  data() {
    return {
      userinfo: {
        mobile: "13911111111", //手机号
        code: "246810", //验证码
      },

      myformrules: {
        mobile: [
          { required: true, message: "手机号不能为空" },
          { pattern: /^1[3456789]\d{9}$/, message: "手机号格式错误" },
        ],
        code: [
          { required: true, message: "验证码不能为空" },
          { pattern: /^\d{6}$/, message: "验证码格式错误" },
        ],
      },
      isshow: true, //验证码按钮 和 倒计时 显隐
    };
  },
  methods: {
    // 提交 手机号 和 验证码 登录
    async onSubmit() {
      //  1.获取表单数据
      const user = this.userinfo;
      // console.log(this);

      /* vant Toast方法挂载到 Vue 的 prototype 上挂载 $toast 方法，便于在组件内调用。
          同时Toast会自动 替换 提示方法
       */
      // vant toast轻提示方法
      this.$toast.loading({
        message: "登录中...", //提示信息
        forbidClick: true, //是否禁止背景点击
        duration: 0, //展示时长(ms)，值为 0 时，toast 不会消失
      });
      // 2.表单验证

      //3.提交表单登录
      try {
        const { data: res } = await login(user);
        // 成功
        //  console.log(res);
         this.$store.commit('setToken',res.data)
         
         this.$toast.success("登录成功");
         this.$router.replace('/my')
        //  console.log(this);
      } catch (err) {
        // 失败
        console.log(err);
        if (err.request.status === 400) {
          this.$toast.fail("手机号或验证码不正确");
        } else if (err.request.status === 507) {
          this.$toast.fail(" 服务器数据库异常");
        } else {
          this.$toast.fail("登录失败，稍后重试");
        }
      }
      //4.根据请求结果处理后续操作
    },

    // 获取验证码
    async getCode() {
      //  1.校验手机号
      // console.log(this);
      const mobile = this.userinfo.mobile;
      try {
        await this.$refs.myfrom.validate("mobile");
      } catch (err) {
        return console.log(err);
      }

      // 2.验证通过，显示倒计时
      this.isshow = !this.isshow;
      // 3.获取发送验证

      //  console.log(res);
      try {
        const res = await code(mobile);
        console.log(res);
      } catch (err) {
        console.log(err + "获取失败");
      }
    },

    // 倒计时结束时触发
    setIsShow() {
      this.isshow = !this.isshow;
    },
    // 左箭头点击事件
    Bank(){
      this.$router.push('/my')
    }
  },
};
</script>

<style lang='less' scoped>
.login-box {
  // 字体图标大小
  .iconfont {
    font-size: 37px;
  }
  // 登录按钮样式
  .submit-box {
    border-radius: 10px;
  }
  .nav-box{
    .iconfont {
      font-size: 50px;
    color: #fff;
  }
  }
}
</style>